import React from 'react';
import './index.css';
import MZListView from '../../../../components/MZListView';
import mzsdk from '../../../../utils/mzsdk';

import { Toast } from 'antd-mobile';

/**
 * 商品列表组件
 */

export default class ShopList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            total: 0,

            goods: [],
            hasMore: true,
            refreshing: false,
            isLoading: false,
            limit: 50,
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = (isMore) => {
        var _this = this;
        var offset = '0';
        if (isMore) {
            offset = this.state.goods.length
        }
        var goodParams = {
            ticketId: this.props.ticketId,//活动ID
            offset: offset,//偏移,当前已经返回的数据总个数
            limit: this.state.limit//请求返回的列表个数
        }

        mzsdk.good.getGoodList(goodParams).then(res => {
            var tempArr = res.list ? res.list : [];
            if (!isMore) {
                _this.setState({
                    goods: tempArr,
                    refreshing: false,
                    hasMore: tempArr.length >= _this.state.limit ? true : false,
                    total: res.total
                })
            } else {
                if (tempArr.length < _this.state.limit) {
                    _this.setState({
                        isLoading: false,
                        hasMore: false
                    })
                } else {
                    _this.setState({
                        isLoading: false
                    })
                }
                var newGoods = _this.state.goods.concat(tempArr)
                _this.setState({
                    goods: newGoods
                })
            }
        }, (err) => {
            Toast.info(err.msg, 1.5)
            _this.setState({
                isLoading: false,
                refreshing: false,
            })
        })
    }

    // 下拉刷新
    onRefresh = () => {
        this.setState({
            refreshing: true,
            hasMore: true
        }, () => {
            this.getData(false)
        })
    }

    // 滑动到底部时加载更多
    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return
        }
        this.setState({
            isLoading: true,
        }, () => {
            this.getData(true)
        })
    }

    toGoodInfo = (good) => {
        let info = '点击了商品详情，商品ID：' + good.id
        Toast.info(info, 1.5)

        this.props.onClose()
    }

    toGoodBuy = (e, good) => {
        let info = '点击了购买，商品ID：' + good.id
        Toast.info(info, 1.5)
        e.stopPropagation()//阻止冒泡，禁止穿透，禁止事件穿透，阻止事件穿透，

        this.props.onClose()
        console.log('goodDetail:',good)
    }
    render() {
        let { goods, total, refreshing, isLoading, limit } = this.state;

        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} className="live-shop-good-item" onClick={this.toGoodInfo.bind(this, rowData)}>
                    <div className="live-shop-good-item-index">{total - rowID}</div>
                    <img className="live-shop-good-item-pic" src={rowData.pic}></img>
                    <div className="live-shop-good-item-info">
                        <div className="live-shop-good-item-name">{rowData.name}</div>
                        <div className="live-shop-good-item-detail">
                            <div className="live-shop-good-item-buy" onClick={(e) => this.toGoodBuy(e, rowData)}>立即购买</div>
                            <div className="live-shop-good-item-price">¥{rowData.price}</div>
                        </div>
                    </div>
                </div >
            )
        }
        return (
            <div>
                {
                    goods.length > 0 ?
                        <MZListView
                            className="live-shop-good-list"
                            data={goods}
                            renderFooter={() => (goods.length >= limit && <div className="live-shop-footer">{isLoading ? '加载中...' : '暂无更多数据'}</div>)}
                            renderRow={row}
                            initialListSize={limit}

                            onPullToRefresh={true}
                            refreshing={refreshing}
                            onRefresh={this.onRefresh}

                            onEndReached={this.onEndReached}
                        /> :
                        <div className="live-shop-empty">暂无商品</div>
                }

            </div>
        )
    }
}
